<script setup lang="ts">
defineOptions({
  name: 'Kind',
})

import { useRouter } from 'vue-router';
import Card from './Card/index.vue'
const router = useRouter()

const gotoDetail = (id) => {
  router.push(`/kind/${id}`)
}
</script>

<template>
  <div class="mushroom-kinds">
    <div v-for="i in 10">
      <Card :key="i" @click="gotoDetail(i)"></Card>
    </div>
  </div>
</template>

<style scoped lang="less">
.mushroom-kinds {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
</style>
